<template>
 <div class="e-table billList">
        <TopStep :stepInfo="stepInfo" />
        <div class="top">
            <div class="left" style="margin-left: 10px">
                <div>
                    <el-button
                        size="mini"
                        @click="buttonAdd"
                        style="background: #7aa818; color: #fff"
                        >新增</el-button
                    >
                </div>
            </div>
            <div class="right">
                <div class="right-div1">
                    <el-input
                        placeholder=""
                        v-model="query.keyWord"
                        size="small"
                    >
                        <i
                            slot="suffix"
                            class="el-icon-search like"
                            @click="getData"
                        ></i>
                    </el-input>
                </div>
                <div>
                    <el-button
                        size="small"
                        style="background: #2e61d7; color: #fff"
                        @click="advancedSearchEvent"
                        >高级搜索</el-button
                    >
                </div>
            </div>
        </div>
        <el-table
            border
            ref="table"
            :data="tableData"
            style="width: 100%"
            class="table"
            highlight-current-row
            height="0"
            v-sortTable="{ 'tableData': tableData, '_this': this, 'ref': 'table' }"
        >
            <el-table-column label="结算编号" min-width="160" show-overflow-tooltip class-name="blue-column" align="center" fixed>
                <template slot-scope="{ row }" >
                    <span @click="examine(row)">{{row.billNo}}</span>
                </template>
            </el-table-column>

            <el-table-column
                prop="settleDate"
                label="结算日期"
                width="130">
            </el-table-column>

            <el-table-column
                prop="orgName"
                label="机构"
                width="220">
            </el-table-column>

             <el-table-column
                prop="settleOrg"
                label="结算单位"
                min-width="220"
                show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
                prop="taxExcluding"
                label="不含税结算金额（元）"
                min-width="120"
            >
            </el-table-column>
            <el-table-column
                prop="totalTaxPrice"
                label="税价合计（元）"
                min-width="120"
            >
            </el-table-column>
            <el-table-column
                prop="totalSettleAmount"
                label="累计结算金额（元）"
                width="120"
            >
            </el-table-column>
             <el-table-column
                prop="settleType"
                label="结算类型"
                width="100"
            >
            <template slot-scope="{ row }" >
                   {{setSettleType(row)}}
            </template>
            </el-table-column>
            <el-table-column
                prop="businessType"
                label="业务类型"
                width="100"
            >
            </el-table-column>
            <el-table-column
                label="源单编号"
                width="150"
                prop="sourceNo"
                class-name="blue-column"
            >
            <template slot-scope="{ row }" >
                    <span @click="seeSourceOrder(row)">{{row.sourceNo}}</span>
            </template>
             </el-table-column>
            <!-- <el-table-column label="评价" width="100" prop="evaluate">
                <template slot-scope="scope">
                    <span
                        @click="dynamicEvaluation(scope.row)"
                        style="color: blue; cursor: pointer"
                    >
                        {{
                            scope.row.evaluate ? scope.row.evaluate : '动态评价'
                        }}
                    </span>
                </template>
            </el-table-column> -->
            <el-table-column label="状态" prop="state" show-overflow-tooltip width="100">
                <template slot-scope="{ row,$index }">
                    <ToolHistory v-if="row.state == 1" :key="$index" url="/turnoversettle/audit/getAuditHistory" :billId="row.billId" :billType="6096">
                        <span v-status="row.state">
                           {{stateLable(row.state)}}
                        </span>
                    </ToolHistory>
                    <span v-else v-status="row.state">
                      {{stateLable(row.state)}}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="红单状态" width="100" prop="redState">
            <template slot-scope="{ row }" >
                    <span
                    @click="goToRed(row)"
                    style="color: blue; cursor: pointer"
                    >{{row.redState}}
                    </span>
            </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <ComPagination
            :total="total"
            :pageSize.sync="query.limit"
            :currentPage.sync="query.page"
            @currentChange="getData"
            @sizeChange="getData"
            class="bottomSetting"
        />
    </div>
</template>
<script>
import TopStep from '@/components/topstep/topstep'
// eslint-disable-next-line no-unused-vars
import { vueDom, openAppClient, advanceSearch } from '@/utils/common'
import ComPagination from '@/components/pagination/pagination'
import { getUnit } from '@/api/subcontractApi/currency'
// eslint-disable-next-line no-unused-vars
import { getLeaseDisburseLs, getCurrentState } from '@/api/settlementManagement/weeklyMaterialSettlement/leaseDisburse'
import { mapMutations, mapState } from 'vuex'
export default {
    components: {
        TopStep,
        ComPagination
    },
    computed: {
        ...mapState('settlementManagement', ['jkkType']),
        ...mapState('equip', ['equipData']),
        ...mapState('turnover', ['turnoverData']), // 业务类型、消耗类型
        //当前结算类型
        setSettleType () {
            return row=>{
                const obj = {
                    1: '内部列账',
                    2: '外来发票',
                }
                return obj[row.settleType]
            }
        },
        //当前状态
        stateLable () {
            return param=> {
                const state =  this.$store.state.equip.equipData.state
                const obj = state.find(x=>x.value == param)
                return (obj ?  obj.label :  '')
            }
        },
    },
    data () {
        return {
            detailsOfProposedArr: [],
            tableData: [],
            mapTableData: {},
            addList: [], // 缓存新增数据
            unitList: [],
            typeArr: [], // 加扣款类型
            searchKey: '',
            isSearch: false,
            addFlag: true,
            stepInfo: [{
                description: '①临时需用计划'
            }, {
                description: '②物资采购合同'
            }, {
                description: '③周材入库'
            }, {
                description: '④租赁支出结算'
            }],
            materialListTeam: [], //存储执行队列
            materialListIndex: 0,
            total: 0,
            query: {
                'keyWord': '',
                'limit': 20,
                'page': 1,
                'search': {
                    'endTime': '',
                    'orgId': '',
                    'settleOrgName': '',
                    'startTime': '',
                    'states': []
                }
            },
            flowParams: {
                'billId': '',
                'billType': 6096,
                'freeNextUnitIndex': 0,
                'freeNextUser': '',
                'isPass': true,
                'isShareInAudit': true,
                'opinion': '',
                'orgId': '',
                'orgName': '',
                'userId': '',
                'workId': ''
            },
            webData: ''
        }
    },
    mounted () {
        vueDom(
            // 默认0为选中项
            () => {
                $('.el-tree-node:first')?.addClass('is-current')
            },
            () => {
                return $('.el-tree-node:first')?.attr('class')?.includes('is-current')
            }
        )
        getUnit().then(res=>{
            let arr = res.map(x=>{
                let obj = {
                    value: '',
                    label: '',
                }
                obj.value = x.kvValue
                obj.label = x.kvKey
                return obj
            })
            this.unitList = arr
        })
        this.getData()
    },
    methods: {
        ...mapMutations(
            'contract', ['setMaterialList']
        ),
        ...mapMutations(
            'settlementManagement', ['setJkkType']
        ),
        ...mapMutations(['setHistoryTableData', 'setSelectedInfo']),
        // 获取列表数据
        async getData () {
            this.query.search.orgId = localStorage.getItem('searchOrgId')
            try {
                const resData = await getLeaseDisburseLs(this.query)
                const targetList = resData.list || []
                //红单状态
                const redState = {
                    '-1': '',
                    '0': '冲销中',
                    '1': '冲销中',
                    '2': '已冲',
                    '3': '红单'
                }
                targetList.forEach(item => {
                    item.isRed = item.redState
                    item.redState = redState[item.redState]
                })
                this.tableData = targetList
                this.total = resData.totalCount
            } catch (error) {
                console.log(error, 'error')
                // this.webData = error
            }

        },
        buttonAdd () {
            this.$router.push('/turnoverLeaseDisburseAdd')
        },
        async examine (row) {
            //判断是否为红单3为红单
            if(row.isRed == 3) {
                this.$router.push({
                    path: '/turnoverLeaseDisburseRed',
                    query: { billid: row.billId }
                })
                return
            }
            this.flowParams.billId = row.billId
            const resData = await getCurrentState(this.flowParams)
            let name = 'turnoverLeaseDisburseView'
            if(resData.canModify) {
                name = 'turnoverLeaseDisburseEdit'
            }
            this.$router.push({
                name,
                query: { billid: row.billId },
                params: { auditState: resData }
            })
        },
        //查看源单页面
        seeSourceOrder (row) {
            const target = row.businessTypeKey ? String(row.businessTypeKey) : ''
            const sourceId = row.sourceId
            switch (target) {
            case '3': // 周材租赁合==同
                openAppClient(`/ctRevolvMaterialApplyShow?billid=${sourceId}&isview=true`, '查看周材租赁合同')
                break
            case '5': // 临时需用计划（租赁）
                openAppClient(`/momentNeedPlanShow?billid=${sourceId}&isview=true`, '查看临时需用计划')
                break
            case '4': // 周材内租调动
                openAppClient(`/revolveInternalLeaseTransferShow?billid=${sourceId}&isview=true`, '查看周材内租调动')
                break
            }
        },
        //点击红单
        goToRed (row) {
            //判断是否为红单
            //relationId为对应的关联id
            if(row.isRed == 3) {
                this.$router.push({
                    path: '/turnoverLeaseDisburseView',
                    query: { billid: row.relationId }
                })
                return
            }else {
                this.$router.push({
                    path: '/turnoverLeaseDisburseRed',
                    query: { billid: row.relationId }
                })
                return
            }
        },
        //高级搜索
        advancedSearchEvent () {
            advanceSearch('/turnoverLeaseDisburseSearch')
                .then(res=>{
                    this.query.keyWord = ''
                    this.query.limit = 20
                    this.query.page = 1
                    this.query.search = res
                    this.getData()
                })
        }
    }
}
</script>
<style lang='scss' scoped>
.blue-column span{
    display: block;
}
</style>
